<template>
  <div>
    <div>X坐标：{{ X }}----Y坐标：{{ Y }}</div>
    <hr />
    <!-- 计数器 -->
    <div>
      {{ num }}
      <button @click="increase">+1</button>
    </div>
    <hr />

    <div>
      <p>{{ name }}</p>
      <input type="text" v-model="input" />
      <button @click="changeName">更改名字</button>
    </div>
    <hr />
    <div>
      <p>{{ bind }}</p>
      <input type="text" v-model="bind" />
    </div>
  </div>
  <hr />
  <div>
    <h2>Vue3 官方例子</h2>
    <router-link to="/treeView">树状视图</router-link> &NonBreakingSpace;
    <router-link to="/transModel">过度效果的模态框</router-link>
    &NonBreakingSpace;
    <router-link to="/grid">带有排序和过滤的网格</router-link>
    &NonBreakingSpace;
    <router-link to="/todo">TODO MVC</router-link> &NonBreakingSpace;
  </div>
  <hr />
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { ref, onMounted, reactive, toRefs, toRef } from "vue";
export default {
  name: "App",
  components: {},
  // Vue3组合API的开始，在create之前执行，所以这里没有this
  // 钩子函数，比如onMounted 可以多次执行。
  // reactive函数，专门定义响应式数据的--让数据具有响应式
  setup() {
    const obj = reactive({
      X: 0,
      Y: 0,
    });
    // 获得响应式对象的X属性
    let X = toRef(obj, "X");
    const move = (e) => {
      // 如果想要改变响应式的数据，要改他的value，而不能直接改数据
      X.value = e.pageX;
      obj.Y = e.pageY;
    };

    const num = ref(0);
    const increase = () => {
      num.value++;
    };

    onMounted(() => {
      document.addEventListener("mousemove", move);
    });

    onMounted(() => {
      console.log("onMounted--开始了");
    });

    // 修改名字
    const name = ref("zhang san");
    const input = ref("");
    const changeName = () => {
      name.value = input.value;
    };

    // 双向绑定
    const bind = ref("");

    return {
      // 这里不能直接解构，直接解构出来的数据是没有响应式的。所以这里加上了toRefs，既能解构，又能响应式
      ...toRefs(obj),
      num,
      increase,
      input,
      name,
      changeName,
      bind,
    };
  },
};
</script>

<style>
body {
  font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.4em;
  background: #f5f5f5;
  color: #111111;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-weight: 300;
}
</style>
